<template>
	<view class="box">
		<view class="top">
			<view class="top_box">
				<!-- 用户地址信息 -->
				<view class="top_box1" v-if="this.id">
					<view class="name">
						<view class="">
							{{site.username}} {{site.userphone}}
						</view>
						<view @click="goAddress" class="top_path">
							更换地址
						</view>
					</view>
					<view class="">
						{{site.location}}{{site.useraddress}}
					</view>
				</view>
				<!-- 无地址状态 -->
				<view @click="goaddress" class="top_box2" v-else>
					+点击完善收货地址
				</view>
			</view>
		</view>

		<!-- 商品信息 -->
		<view class="goodsInfo">
			<view class="info_top">
				<view class="">
					<image src="../../static/img/pingpai01.png" mode=""></image>
					<text>品牌精选</text>
				</view>
				<view class="">
					<text>以免运费</text>
					<text>|</text>
					<text>领卷</text>
				</view>
			</view>

			<!-- 信息 -->
			<view v-for="item in goodsinfo" :key="item.id" class="info_con">
				<image :src="imgurl + item.img" mode=""></image>
				<view class=" info_con_box">
					<view class="info_goodsname">{{item.goodsname}}</view>
					<view class="price">{{item.price}}</view>
					<view class="v3">
						<view class="v3_vi">
							七天无理由退款
						</view>
						<view class="">
							{{item.num}}
						</view>
					</view>
				</view>
			</view>

			<view class="info_list">
				<text class="list_size">发票类型</text>
				<text>不开发票</text>
			</view>
			<view class="info_list">
				<text class="list_size">售后免邮</text>
				<text>部分商家赠送</text>
			</view>
			<view class="info_list">
				<text class="list_size">买家留言</text>
				<text> <input type="text" placeholder="填写内容需要与商家协商并确认,45字以内"> </text>
			</view>


		</view>
		<view class="info_bot">
			<view class="info_list">
				<text class="list_size">商品金额</text>
				<text>¥200</text>
			</view>
			<view class="info_list">
				<text class="list_size">优惠活动</text>
				<text class="list_red">-¥200</text>
			</view>
			<view class="info_list">
				<text class="list_size">优惠卷</text>
				<text>更多优惠卷></text>
			</view>
		</view>

		<!-- 底部 -->
		<view class="bottom">

			<view class="bot_l">
				<view class="bot_t">
					<text class="bot_t1">合计</text>
					<text class="bot_t2">¥{{orderinfo.countmoney}}</text>
				</view>
				<view class="">
					<text class="text">以免运费</text>
					<text class="text">已优惠</text>
				</view>
			</view>

			<view class="bot_r">
				确认订单
			</view>
		</view>
	</view>
</template>

<script>
	import user from '../../common/userinfo.js'
	// 引入接口
	import {
		Addresslist
	} from '../../request/app.js'
	export default {
		data() {
			return {
				imgurl: this.$imgUrl,
				site: [], // 存放地址
				id: '', // 存放地址列表 点击跳转订单页  传的id
				goodsinfo: [], // 存放商品信息
				orderinfo: [] // 存放必传参数
			}
		},
		methods: {
			// 添加地址：点击跳转 地址列表页面
			goaddress() {
				uni.navigateTo({
					url: '../addresslist/addresslist'
				})
			},

			// 更换地址：点击跳转 地址列表页面
			goAddress() {
				uni.navigateTo({
					url: '../addresslist/addresslist'
				})
			}
		},
		onLoad(opation) {
			// 如果地址栏有id  就调用地址查询的接口
			this.id = opation.id
			if (opation.id) {
				Addresslist({
						uid: user.uid,
						id: this.$mp.id
					})
					.then(res => {
						console.log(res, '订单页地址');
						if(res.data.code == 200){
							this.site = res.data.list[0]
						}
						console.log(this.site);
					})
			}

			this.goodsinfo = uni.getStorageSync('arr')
			console.log(this.goodsinfo);
			this.orderinfo = uni.getStorageSync('orderInfo')
			console.log(this.orderinfo);
		}
	}
</script>

<style lang="less">
	.box {
		background-color: #dedede;
		margin-bottom: 80px;
		padding-bottom: 80px;
		box-sizing: border-box;
		.top {
			width: 100%;
			height: 110px;
			background-color: #ff6040;
			padding-top: 30px;
			box-sizing: border-box;
			margin-bottom: 30px;

			.top_box {
				width: 95%;
				height: 100px;
				background-color: #fff;
				margin: auto;
				font-size: 20px;
				overflow: hidden;

				.top_box1 {
					padding-top: 10px;
					padding-left: 10px;

					.name {
						margin-bottom: 10px;
						display: flex;
						justify-content: space-between;

						.top_path {
							margin-right: 10px;
							width: 100px;
							text-align: center;
							border-radius: 5px;
							background-color: #ff6040;
							color: #fff;
						}
					}
				}

				.top_box2 {
					width: 260px;
					height: 50px;
					margin: 25px auto;
					line-height: 50px;
					text-align: center;
					background-color: aqua;
					border-radius: 10px;
					border: 1px solid black;
				}
			}
		}


		// 商品信息
		.goodsInfo {
			width: 100%;
			// height: 200px;
			background-color: #fff;
			padding: 10px;
			box-sizing: border-box;

			.info_top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 20px;

				text {
					margin-right: 10px;
				}

				image {
					width: 16px;
					height: 16px;
					margin-right: 5px;
				}
			}

			.info_con {
				padding: 15px;
				box-sizing: border-box;
				display: flex;

				image {
					width: 120px;
					height: 120px;
					margin-right: 15px;
				}

				.info_con_box {
					width: 200px;

					.info_goodsname {
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					.price {
						color: red;
						margin: 10px 0;
					}

					.v3 {
						line-height: 40px;
						display: flex;
						justify-content: space-between;

						.v3_vi {
							width: 130px;
							text-align: center;
							color: #fff;
							border-radius: 10px;
							background-color: #ff6040;
						}
					}
				}

			}

			.info_list {
				line-height: 50px;
				display: flex;
				justify-content: space-between;
				color: #999;

				.list_size {
					font-size: 20px;
					color: black;
					// font-weight: bold;
				}

				input {
					width: 280px;
					height: 35px;
				}
			}
		}

		.info_bot {
			margin-top: 10px;
			padding: 10px;
			box-sizing: border-box;
			background-color: #fff;

			.info_list {
				line-height: 50px;
				display: flex;
				justify-content: space-between;
				color: #999;

				.list_size {
					font-size: 20px;
					color: black;
					// font-weight: bold;
				}

				input {
					width: 280px;
					height: 35px;
				}

				.list_red {
					color: #ff6040;
				}
			}
		}

		.bottom {
			width: 100%;
			height: 70px;
			background-color: #fff;
			position: fixed;
			bottom: 0;
			display: flex;
			justify-content: space-between;
			padding-left: 10px;
			box-sizing: border-box;

			.bot_l {
				padding-top: 10px;
				box-sizing: border-box;
				font-size: 18px;

				.text {
					margin-right: 20px;
					color: #999;
				}

				.bot_t1 {
					margin-right: 20px;
				}

				.bot_t2 {
					color: #ff6040;
				}
			}

			.bot_r {
				width: 150px;
				height: 70px;
				font-size: 25px;
				color: #fff;
				line-height: 70px;
				text-align: center;
				background-color: #ff6040;
			}
		}
	}
</style>
